<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
  </head>

  <body>
    <canvas id="myCanvas" width="600" height="300">
      <p>您的浏览器不支持 canvas!</p>
    </canvas>

    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="/node_modules/jcanvas/dist/jcanvas.js"></script>
    <script>
      var $myCanvas = $('#myCanvas')

      $myCanvas.drawArc({
        strokeStyle: 'steelblue',
        strokeStyle: 'blue',
        strokeWidth: 4,
        // x,y 圆心点
        x: 100,
        y: 100,
        radius: 50, // 圆弧对应半径
        /**
         * @brief: 是否逆时针方向
         * @param: {Boolean} ccw
         * true: 逆时针
         * false(def): 默认顺时针
         * */
        ccw: true,
        // 以度数为单位的圆弧
        start: 0, // 开始（! 是从画布y轴负方向开始的）
        end: 120, // 结束
      })
    </script>
  </body>
</html>
